<template>
  <el-dialog title="测试详情" :before-close="closeCall" :visible.sync="dialogVisible" :modal-append-to-body='false' width="90%"  class="dialog">
    <div class="detail-dialog">
      <el-row style="height: 600px">
        <el-col :span="7" style="padding-right: 10px;height: 100%;background-color: #e3ebee">
          <div style="background-color: #FFFFFF;height: 100%">
            <el-tabs v-model="todayOrHistory">
              <el-tab-pane label="今日测试详情" name="today">
                <history-list :url="url.day" :it-id="detailData.id" @rowClickCall="rowClickCall"/>
              </el-tab-pane>
              <el-tab-pane label="历史测试详情" name="history">
                <history-list :url="url.his" :it-id="detailData.id" @rowClickCall="rowClickCall"/>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-col>
        <el-col :span="17" style="height: 100%;overflow-x: hidden">
          <div class="rightContent" v-if="zhangy">
            <div>
              <div class="right_title">基本信息</div>
              <el-row class="data_header">
                <el-col :span="5">并发数</el-col>
                <el-col :span="5">接口数</el-col>
                <el-col :span="5">测试用例总数</el-col>
                <el-col :span="5">成功率</el-col>
              </el-row>
              <el-row class="data_msg" v-if="isChar">
                <el-col :span="5">
                  <count-to :start-val="0" :end-val="detail.concurrentCount ? detail.concurrentCount : 0" :duration="3600" style="color: #3BA1FF;"/>
                </el-col>
                <el-col :span="5">
                  <count-to :start-val="0" :end-val="detail.counter ? detail.counter.interfaceTotal : 0" :duration="3600" style="color: #69D389;"/>
                </el-col>
                <el-col :span="5">
                  <count-to :start-val="0" :end-val="detail.counter ? detail.counter.testUseCaseTotal : 0" :duration="3600" style="color: #FCDA56;"/>
                </el-col>
                <el-col :span="5">
                  <count-to :start-val="0" :end-val="detail.successTotal/detail.total*100" :duration="3600" style="color: #3BA1FF;"/><span style="color: #3BA1FF;">%</span>
                </el-col>
              </el-row>
            </div>
            <div class="marginTop_20">
              <div class="right_title">接口测试记录</div>
              <el-table :data="interfaceList" @row-click="rowClick"  @expand-change="expandChange">
                <el-table-column type="expand">
                  <template slot-scope="props">
                    <el-table :data="props.row.useCaseList">
                      <el-table-column type="index" label="序号" align="center" width="60px"></el-table-column>
                      <el-table-column label="用例名称" prop="testUseCaseName" width="140px" show-overflow-tooltip>
                      </el-table-column>
                      <el-table-column label="开始时间" width="160px" show-overflow-tooltip>
                        <template slot-scope="scope">{{$time(scope.row.startTime)}}</template>
                      </el-table-column>
                      <el-table-column label="成功率" width="210px">
                        <template slot-scope="scope">
                          <el-tooltip class="item" effect="dark" :content="prograssMsg(scope.row)" placement="top">
                            <el-progress v-if="!doStatus(scope.row,true).state" :status="doStatus(scope.row,true).string" :percentage="doStatus(scope.row,true).zyNumber"></el-progress>
                            <el-progress v-else :percentage="doStatus(scope.row,true).zyNumber"></el-progress>
                          </el-tooltip>
                        </template>
                      </el-table-column>
                      <el-table-column label="耗时">
                        <template slot-scope="scope">{{$millisecond(scope.row.endTime - scope.row.startTime)}}</template>
                      </el-table-column>
                      <!--<el-table-column label="最快响应时间"></el-table-column>-->
                      <!--<el-table-column label="最慢响应时间"></el-table-column>-->
                      <el-table-column label="操作">
                        <template slot-scope="scope">
                          <el-button type="text" @click="open(scope,props.row)" v-if="scope.row.status === '2'">查看失败历史</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </template>
                </el-table-column>
                <el-table-column type="index" label="序号" header-align="center" align="center" width="60px"></el-table-column>
                <el-table-column label="接口名称" prop="interfaceName" width="140px" show-overflow-tooltip></el-table-column>
                <el-table-column label="开始时间" width="160px" show-overflow-tooltip>
                  <template slot-scope="scope">{{$time(scope.row.startTime)}}</template>
                </el-table-column>
                <el-table-column label="成功率" width="210px">
                  <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" :content="prograssMsg(scope.row)" placement="top">
                      <el-progress v-if="!doStatus(scope.row,true).state" :status="doStatus(scope.row,true).string" :percentage="doStatus(scope.row,true).zyNumber"></el-progress>
                      <el-progress v-else :percentage="doStatus(scope.row,true).zyNumber"></el-progress>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column label="耗时" prop="interfaceName">
                  <template slot-scope="scope">{{$millisecond(scope.row.endTime - scope.row.startTime)}}</template>
                </el-table-column>
                <!--<el-table-column label="最快响应时间"></el-table-column>-->
                <!--<el-table-column label="最慢响应时间"></el-table-column>-->
              </el-table>
            </div>
            <div  class="marginTop_20">
              <el-row>
                <el-col :span="24"><div class="right_title">性能消耗</div></el-col>
                <el-col :span="5">
                  <el-checkbox-group v-model="checkList" style="margin-top: 10px">
                    <el-checkbox label="CPU"></el-checkbox>
                    <el-checkbox label="内存"></el-checkbox>
                  </el-checkbox-group>
                </el-col>
              </el-row>
              <div class="flex" v-if="isChar">
                <div class="item" v-if="checkList.indexOf('CPU') >= 0" :class="{active: checkList.length === 1}">
                  <char height="400px" width="100%" id="cpu"/>
                </div>
                <div class="item" v-if="checkList.indexOf('内存') >= 0" :class="{active: checkList.length === 1}">
                  <char height="400px" width="100%" id="memory"/>
                </div>
              </div>
            </div>
            <div class="pager">
              <el-pagination
                @size-change="rightPageSizeChange"
                @current-change="rightPageCurrentChange"
                :current-page="1"
                :page-size="10"
                layout="total, prev, pager, next, jumper"
                :total="rightPage.total">
              </el-pagination>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-dialog width="40%" title="失败详情" :visible.sync="isFalse" :before-close="handleClose" append-to-body>
        <div style="padding: 20px">
              <template>
                <el-row>
                  <el-col :span="15">
            <el-table
              highlight-current-row
              :data="testTableData"
              @row-click="rowClickFail"
              style="width: 100%">
              <el-table-column
                prop="idx"
                label="序号"
                width="80">
              </el-table-column>
              <el-table-column
                prop="start"
                label="开始时间"
                width="160">
              </el-table-column>
              <el-table-column
                prop="end"
                label="结束时间"
                width="160">
              </el-table-column>
              <!--<el-table-column
                label="返回信息"
              >
                <template slot-scope="scope">
                  &lt;!&ndash;<el-tooltip class="item" :content="parseMsg(scope.row.status)" placement="top">&ndash;&gt;

                  <span @click="chkVisible = true">查看</span>

                  &lt;!&ndash;<pre class="pre">{{scope.row.status}}</pre>&ndash;&gt;
                  &lt;!&ndash;</el-tooltip>&ndash;&gt;
                </template>
              </el-table-column>-->
            </el-table>
            <div class="pager">
              <el-pagination
                @size-change="PageSizeChange"
                @current-change="PageCurrentChange"
                :current-page="1"
                :page-size="10"
                layout="total, prev, pager, next, jumper"
                :total="rightFailPage.total">
              </el-pagination>
            </div>
          </el-col>
            <el-col :span="6" style="padding-left: 20px;">
              <div class="fail_right_title">返回详情</div>
              <div><pre>{{showJsonString}}</pre></div>
            </el-col>
            <el-col :span="6" style="padding-left: 20px;">
              <div class="fail_right_title">断言</div>
              <div><pre>{{duanyanString}}</pre></div>
            </el-col>
          </el-row>
              </template>
        </div>
    </el-dialog>
  </el-dialog>
</template>

<script>
  import HistoryList from './HistoryList'
  import Char from '../../../component/Charts/Line'
  import CountTo from 'vue-count-to'

  export default {
    components: {
      HistoryList, Char, CountTo
    },
    name: "DetailTest",
    props: {
      detailDialog: {
        type: Boolean
      },
      detailData: {
        type: Object
      }
    },
    data() {
      return {
        /*加载*/
        zhangy: false,
        /*查看失败开关*/
        isFalse: false,
        testTableData:[],
        chkVisible: false,
        showJsonString: "暂无数据，请选择",
        duanyanString: "暂无数据，请选择",
        dialogVisible: this.detailDialog,
        todayOrHistory:"today", //今日、历史tab
        query: {
          pageNum: 1,
          pageSize: 10,
          total:0,
        },
        interfaceList:[], //接口列表
        url: {
          day: this.interfaceUrl.path + "/integration/test/record/page/today",
          his: this.interfaceUrl.path + "/integration/test/record/page/history",
        },
        detail: {},
        checkList:["CPU","内存"],//性能复选框
        isChar: true,

        /*分页的数据*/
        rightPage: {
          pageNum: 1,
          pageSize: 10,
          total: 10,
        },
        rightFailPage: {
          pageNum: 1,
          pageSize: 10,
          total: 0,
        },
        tmpRow:{}
      }
    },
    watch:{
      checkList(){
        this.isChar = false;
        this.$nextTick(() => {
          this.isChar = true;
        })
      }
    },
    methods: {
      /**关闭弹窗回调**/
      closeCall(done){
        this.$emit("closeCall");
        if (done) {
          done();
        }
      },

      /*进行进度条的状态展示的选择的方法*/
      doStatus(item,type) {
        let total , alltotal, state;
        if(!type){
          total = item.lastTestSuccessInterfaceTotal;
          alltotal = item.lastTestInterfaceTotal;
          state = item.lastTestStatus;
        }else {
          total = item.successTotal;
          alltotal = item.total;
          state = item.status;
        }


        /*通过比对两个值进行展示结果的显示*/
        /*不纯在或者为null的时候就为0*/
        // let keyReturn = false;
        // if (total === null || alltotal === null) {
        //   keyReturn = true;
        // }

        // if(keyReturn){
        //   this.$message.error("配置参数异常，请联系管理员！");
        //   return false;
        // }

        if (total === null ) {
          total = 0
        }

        if (alltotal === null || alltotal == 0) {
          alltotal = 1
        }


        let number = parseInt((total / alltotal) * 100);
        let backString = "", myState = false;
        switch (state) {
          case '0':
            /*执行中*/
            myState = true;
            break;
          case '1':
            /*执行成功*/
            backString = "success";
            break;
          case '2':
            /*执行失败*/
            backString = "exception";
            break;
        }

        return {
          state: myState,
          zyNumber: number,
          string: backString
        }
      },
      prograssMsg(row){
        return row.successTotal+"/"+row.total
      },
      parseMsg(row) {
        return JSON.stringify(row);
      },
      handleClose() {
        this.showJsonString = "暂无数据，请选择";
        this.duanyanString = "暂无数据，请选择";
        this.isFalse = false;
      },
      /**单击回调**/
      rowClickCall(item) {
        this.detail = item;
        this.isChar = false;
        setTimeout(()=>{
          this.isChar = true;
          this.zhangy = true;
        },1);

        this.axios.get("/api/integration/test/interfaces/" + item.counter.itrId).then((rsp) => {
          this.interfaceList = rsp.data.data;

          this.interfaceList.forEach((item)=>{
            this.expandChange(item)
          });

          setTimeout(() => { this.loading = false }, 500);
        }).catch(() => {
          setTimeout(() => { this.loading = false }, 500);
        })
      },
      /**点击每行**/
      rowClick(row) {
        this.axios.get("/api/integration/test/interface/usecases/" + row.id).then((rsp)=>{
          row.useCaseList = rsp.data.data;
          setTimeout(() => {this.loading = false}, 500);
        }).catch(()=>{
          setTimeout(() => {this.loading = false}, 500);
        })
      },
      expandChange(row){
        this.rowClick(row);
      },
      rowClickFail(row){
        this.showJsonString = row.status;
        this.duanyanString = row.duanyan;
      },
      /**改变显示条数**/
      sizeChange(val) {
        this.query.pageSize = val;
      },
      /**改变页数**/
      currentChange(val) {
        this.query.pageNum = val;
      },

      /*改变右侧的显示页面*/
      rightPageSizeChange(val){
        this.rightPage.pageSize = val;
      },
      /*改变右侧的当前显示页面*/
      rightPageCurrentChange(val){
        this.rightPage.pageNum = val;
      },

      /*改变显示条数*/
      PageSizeChange(val){
        this.rightFailPage.pageSize = val;
        this.open(this.tmpRow)
      },
      /*改变当前显示页面*/
      PageCurrentChange(val){
        this.rightFailPage.pageNum = val;
        this.open(this.tmpRow)
      },

      /*打开失败详情的*/
      open(myNew){
        //console.log(myNew);
        this.tmpRow = myNew;
        let that = this;
        this.isFalse = true;
        this.axios.get("/api/integration/test/record",{
          params: {
            itirId: myNew.row.itirId,
            tucId: myNew.row.testUseCaseId,
            pageNum: this.rightFailPage.pageNum,
            pageSize: this.rightFailPage.pageSize,
          }
        }).then((rsp)=>{
          console.log(rsp);
          this.testTableData = [];
          this.rightFailPage.total = rsp.data.data.total;
          for(let i=0;i<rsp.data.data.list.length;i++) {
            if (typeof rsp.data.data.list[i].outValue === "string" && rsp.data.data.list[i].outValue != "") {
              try {
                rsp.data.data.list[i].outValue = JSON.parse(rsp.data.data.list[i].outValue);
              }
              catch (e) {
              }
            }
            if (typeof rsp.data.data.list[i].assertValue === "string" && rsp.data.data.list[i].assertValue != "") {
              try {
                rsp.data.data.list[i].assertValue = JSON.parse(rsp.data.data.list[i].assertValue)
              }
              catch (e) {
              }
            }
            this.testTableData.push({
              idx: i+1,
              start: this.$time(rsp.data.data.list[i].startTime),
              end: this.$time(rsp.data.data.list[i].endTime),
              /*status: {"success" : false, "messages" : [
                  { "key":"status", "status" : false, "condition" : 0, "value" : "1", "groupCondition" : "AND", "type" : "NUMBER"}]}*/
              status: rsp.data.data.list[i].outValue,
              duanyan: rsp.data.data.list[i].assertValue,
            })
          }
        });
      }
    }
  }
</script>

<style>
  .el-dialog__header {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .el-table__expanded-cell[class*=cell], .el-table__expanded-cell[class*=cell] .el-table th, .el-table__expanded-cell[class*=cell] .el-table tr, .el-table__expanded-cell[class*=cell] .el-table--enable-row-hover .el-table__body tr:hover>td:hover, .el-table__expanded-cell[class*=cell] .el-table--enable-row-hover .el-table__body tr:hover>td{
    background-color: #eee !important;
  }
</style>
<style scoped lang="less">
  .dialog{
    margin-top: -50px;
  }
  .detail-dialog{
    padding: 15px;
    min-height: 600px;
    .tabheader{
      height: 40px;
      line-height: 40px;
      background-color: #ccc;
    }
    .tab_body{
      margin-top: 5px;
      height: 550px;
      .progress{
        pardding:0 5px;
        line-height: 24px;
      }
    }
    .rightContent{
      padding-left:20px ;
      /*min-width: 800px;*/
      /*overflow-x: auto;*/
      .right_title{
        font-size: 16px;
        font-weight: bold;
        color: #409EFF;
        margin: 10px 0;
      }
      .data_header{
        color: #999;
      }
      .data_msg{
        margin-top: 5px;
        font-size: 24px;
        font-weight: bold;
      }
      .progress{
        padding: 0 10px;
        line-height: 48px;
      }
    }
  }
  .flex{
    display: flex;
    .item{
      width: calc(100% / 2);
    }
    .item.active{
      width: 100%;
    }
  }
  .fail_right_title{
    font-size: 16px;
    font-weight: bold;
    color: #409EFF;
    margin: 10px 0;
  }
</style>
